<template>
  <div id="NavMenu">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
    >
      <template v-for="item in navMenuData">
        <el-menu-item :index="item.index" :key="item.index" v-if="!item.child">{{item.name}}</el-menu-item>

        <el-submenu :index="item.index" :key="item.index" v-if="item.child">
          <template slot="title">{{item.name}}</template>
          <template v-for="item2 in item.child" :key="item2.index">
            <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { getWebConfig, getWebNavbar } from '@/api/system/menu'
export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: "movie",
      navMenuData: [
        { index: "movie", name: "电影" },
        { index: "novel", name: "小说" },
        {
          index: "2",
          name: "我的工作台",
          child: [{ index: "2-1", name: "选项1" },{ index: "2-2", name: "选项2" },{ index: "2-3", name: "选项3" }]
        },

      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    /**
     * 获取网站配置
     */
    getWebConfigInfo: function() {
      if (this.$store.state.app.webConfigData) {
        this.info = this.$store.state.app.webConfigData
        console.log(this.info)
      } else {
        getWebConfig().then(response => {
          this.info = response.data
          // 存储在Vuex中
          this.$store.dispatch('app/setWebConfigData', response.data)
          this.openComment = this.info.openComment
        })
      }
    }
  },
  mounted(){
    console.log(this.activeIndex)
    console.log(this.$route.path)
    this.activeIndex = this.$route.path.substring(1,this.$route.path.length);

  }
};
</script>

<style scoped>
</style>
